<template>
  <div class="container">
    <div class="text">试题录入</div>
    <el-form :model="addList" :rules="listRules" ref="listRulesRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学科:" prop="subjectID">
        <el-select  v-model="addList.subjectID" placeholder="请选择"  @change="getMUlu">
          <el-option v-for="(item, index) in sublist" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录:" prop="catalogID">
        <el-select placeholder="请选择" v-model="addList.catalogID">
          <el-option v-for="(item, index) in muluLIst" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业:" prop="enterpriseID">
        <el-select placeholder="请选择" v-model="addList.enterpriseID">
          <el-option v-for="(item, index) in qiyeList"  :key="index" :value="item.id" :label="item.shortName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市:" prop="city">
        <el-select placeholder="请选择" v-model="addList.province" class="city" @change="changeCity">
          <el-option v-for="(item, index) in province" :lable="item" :key="index" :value="item"></el-option>
        </el-select>
        <el-select placeholder="请选择" v-model="addList.city" class="city">
          <el-option v-for="(item, index) in citys" :lable="item" :key="index" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向:" prop="direction">
        <el-select placeholder="请选择" v-model="addList.direction">
            <el-option :label="item" :value="item" v-for="(item,index) in direction " :key="index"></el-option>
            <!-- <el-option label="o2o" value="o2o"></el-option>
            <el-option label="外包服务" value="外包服务"></el-option>
            <el-option label="企业服务" value="企业服务"></el-option>
            <el-option label="互联网金融" value="互联网金融"></el-option>
            <el-option label="企业咨询" value="企业咨询"></el-option>
            <el-option label="互联网" value="互联网"></el-option>
            <el-option label="电子商务" value="电子商务"></el-option>
            <el-option label="其他" value="其他"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="题型:" prop="questionType">
        <el-radio-group v-model="addList.questionType" @change="ChangeRadio">
          <el-radio :label="'1'">单选</el-radio>
          <el-radio :label="'2'">多选</el-radio>
          <el-radio :label="'3'">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度:" prop="difficulty">
        <el-radio-group v-model="addList.difficulty">
          <el-radio :label="'1'">简单</el-radio>
          <el-radio :label="'2'">一般</el-radio>
          <el-radio :label="'3'">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题干:" prop="question">
        <quill-editor v-model="addList.question"> </quill-editor>
      </el-form-item>
        <template v-if="addList.questionType === '1'">
        <el-form-item label="选项:" v-model="codeNumberJ">
          <div v-for="(item,index) in addList.options" :key="index">
            <el-radio-group v-model="codeNumberJ">
              <el-radio :label="index">{{item.code}}:</el-radio>
            </el-radio-group>
            <el-input class="itemClass" v-model="addList.options[index].title"></el-input>
            <el-upload
            class="avatar-uploader"
            action="http://www.liulongbin.top:3006/api/upload/avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <!-- <img v-if="item.img" :src="item.img" class="avatar"> -->
              <i class="el-icon-circle-close"></i>
              <span>上传图片</span>
            </el-upload>
          </div>
          <el-button type="danger" size="small" icon="el-icon-plus" :disabled="addDisabled">新增选项与答案</el-button>
          </el-form-item>
        </template>
        <template v-else-if="addList.questionType === '2'">
          <el-form-item label="选项:" >
          <div v-for="(item,index) in addList.options" :key="index">
            <el-checkbox-group v-model="codeNumberO">
              <el-checkbox :label="index">{{item.code}} :</el-checkbox >
            </el-checkbox-group>
          <el-input class="itemClass" v-model="addList.options[index].title"></el-input>
          <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
          <i class="el-icon-circle-close"></i>
          <span>上传图片</span>
        </el-upload><br />
          </div>
          <el-button type="danger" size="small" icon="el-icon-plus" :disabled="addDisabled" @click="addCheckBox">新增选项与答案</el-button>
          </el-form-item>
        </template>
        <template v-else></template>

      <el-form-item label="解析视频:">
        <el-input class="remarks" v-model="addList.videoURL"></el-input>
      </el-form-item>
      <el-form-item label="答案解析:" prop="answer" class="jiexi">
        <quill-editor v-model="addList.answer"> </quill-editor>
      </el-form-item>
      <el-form-item label="题目备注:">
        <el-input type="textarea" class="remarks" v-model="addList.remarks"></el-input>
      </el-form-item>
      <el-form-item label="试题标签:" prop="tags">
         <el-select
          v-model="addList.tags"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择试题标签">
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as MUsimple } from '@/api/hmmm/directorys'
import { add } from '@/api/hmmm/questions'
import { direction } from '@/api/hmmm/constants' // 导入方向
import { detail } from '@/api/hmmm/questions/'
export default {
  data () {
    return {
      addList: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        province:'', // 城市id
        city:'', // 区县id
        enterpriseID: '', // 企业
        direction: '', // 方向
        // 题型
        questionType: '1',
        difficulty: '1', // 难度
        question: '', // 题干
        options: [ // 选项
          {isRight: false, code: "A", title: "", img: ""},
          {isRight: false, code: "B", title: "", img: ""},
          {isRight: false, code: "C", title: "", img: ""},
          {isRight: false, code: "D", title: "", img: ""}
        ],
        tags: [], // 试题标签
        // remarks: '', // 题目备注
        answer: '', // 答案解析
        // videoURL: '' // 解析视频
      },
      // 获取数据的列表
      
      codeNumberJ: null, // 单选选项双向数据绑定,记录是哪一个选项被选中的
      codeNumberO: [], // 多选选项，记录在多选情况下，被选中的选项
      sublist: [], // 学科
      qiyeList: [], // 企业
      muluLIst: [], // 目录
      provinces: [], // 城市
      citys: [], // 区县
      // 校验规则
      listRules: {
        subjectID: [
          { required: true, message: '请输入学科名称', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请输入目录名称', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请输入方向名称', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请输入企业名称', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择题型难度', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请输入试题标签', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ]
      },
      visible: false,
      imageUrl:'',
      tage: [], // 保存试题标签
      direction, // 方向：从api中调用的接口，返回的是一个数组
      IMGdialogVisible: false
    }
  },
  created () {
    this.getAddList()
    this.getQiye()
    this.getcity()
    this.getSetLIst()
  },
  methods: {
    async getSetLIst () { // 拿着动态路由传过来的值，获取数据
      if (this.$route.query.id) { // 判断当前动态路由是否传参
       const { data } = await detail({id: this.$route.query.id})
       this.addList = data
       if (this.addList.questionType === '1') {
         this.addList.options.forEach((i, m) => { // 找出当前被选中的
           if (i.isRight === 1) return this.codeNumberJ = m // 赋予radio绑定的数组 作为展示
         })
       } else if (this.addList.questionType === '2') {
         this.addList.options.forEach((i, m) => { // 同理
           if (i.isRight === 1) return this.codeNumberO.push(m)
         })
       }
       this.addList.tags = this.addList.tags.split(',')
       this.getMUlu() // 那这最新的数据获取目录
       console.log(this.addList.enterpriseID)
       this.addList.enterpriseID = this.qiyeList[this.addList.enterpriseID].id // 有的数据企业返回的是在数组中的id，有的是企业id
       
      }
    },
    async getAddList () { // 获取学科
      const { data } = await simple()
      // this.list = data
      this.sublist = data
    },
    async getQiye() { // 获取企业列表
      const { data } = await list()
      this.qiyeList = data.items
    },
    getcity () { // 获取城市
     this.province = provinces()
    },
    changeCity () { // 获取区县
      this.citys = citys(this.addList.province)
    },
    async getMUlu () { // 获取目录列表
      const { data } = await MUsimple({subjectID: this.addList.subjectID})
      this.muluLIst = data
     },
     submitForm () { // 添加！
       this.$refs.listRulesRef.validate(bel => {
         if (bel) {
           this.addList.tags = this.addList.tags.join(',') // 将标签数组转化
           if (this.addList.questionType === '1') { // 发送前将被彀中的选项转化为布尔值
             this.addList.options.forEach((i, m) => {
             if (m === this.codeNumberJ) return i.isRight = true
           })
           } else if (this.addList.questionType === '2') {
             this.codeNumberO.forEach(i => {
               this.addList.options[i].isRight = true
             })
           }
           add(this.addList)
            .then(_ =>{
              this.$message({ type: 'success', message: '录入成功!' })
              this.$router.push('/questions/list') // 成功后跳转
            })
            .catch(e =>{
              console.log(e)
            })
         } else {
           return false
         }
       })
     },
     addCheckBox () { // 点击新增选项卡，利用ascllc码
      const w =String.fromCharCode(65 + this.addList.options.length) // 根据当前的数组长度，生成asclls
       this.addList.options.push({isRight: false, code: w, title: '', img: ''}) // 添加进数组中
     },
     ChangeRadio () { // 解决BUG：改变题型的时候，重置下方对应选项卡的双向数据绑定源
      // this.addList.options.forEach(i => {
      //   i.isRight = false
      // })
      this.addList.options = [ // 选项
          {isRight: false, code: "A", title: "", img: ""},
          {isRight: false, code: "B", title: "", img: ""},
          {isRight: false, code: "C", title: "", img: ""},
          {isRight: false, code: "D", title: "", img: ""}
        ]
      this.codeNumberJ = null
      this.codeNumberO = []
     },
    handleAvatarSuccess (res, file) {
      this.imageUrl = 'http://www.liulongbin.top:3006' + res.url
      this.$message({type: 'success',message: '上传图片成功'})
      this.IMGdialogVisible = true
    }, // 上传图片预留
    setIndx (index) {
      console.log(index);
    }
  },
  watch: {
    codeNumber (val) { // 保持单选情况下选项标签只能被选中一个
      if (this.addList.questionType === '1') {
        this.addList.options.forEach((i,m) => {
        if (m == val) {
          i.isRight = true
        } else {
          i.isRight = false
        }
        
      })
      }
    }
  },
  computed: {
    addDisabled () { // 控制新增试题红色按钮高亮
      if (this.addList.questionType === '2') return false // 选择多选才可以高亮
      return true
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  margin: 15px 10px;
  // padding: 20px;
  background: #fff;
  .text {
    padding: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ebeef5;
  }
  .el-form {
    padding-left: 55px;
  }
  .el-select,
  .remarks {
    width: 400px;
  }
  .quill-editor {
    height: 200px;
    margin-bottom: 50px;
  }
  .el-button {
    margin-bottom: 30px;
  }
  .itemClass {
    width: 250px;
    margin-bottom: 45px;
  }
  /deep/.avatar-uploader {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-left: 4px;
      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        width: 100px;
        height: 60px;
        line-height: 60px;
    }
    .el-icon-circle-close {
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transform: translate(50%,-50%);
      transform: translate(50%,-50%);
      background: #fff;
      font-size: 18px;
      color: #999;
    }
  } 
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .city {
    width: 198px;
    margin-right: 5px;
  }
  .tags {
    width: 400px;
  }
  .el-checkbox {
    margin-right: 25px;
  }
  .quill-editor {
   margin-right: 20px;
   margin-bottom: 90px;
  }
  /deep/.el-radio__label {
    margin-right: 25px;
  }
  .el-checkbox-group {
    display: inline-block;
  }
  // .imgg {
  //   display: inline-block;
  //   width: 100px;
  //   height: 60px;
  //   vertical-align: middle;
  //   line-height: 1;
  //   margin-left: 4px;
  // }
}
</style>
